<template>
	<view class="page">
		<navbar title="蜂达人" />
		<view class="top-hr"></view>
		<!-- 弹框 -->
		<uv-popup ref="popup" mode="center" custom-style="height: 200rpx;"
			customStyle="background: transparent;width: 80%;">
			<view class="selectModeBox">
				<view style="display: flex;flex-direction: column;" class="selectModeBoxBg">
					<view style="display: flex;
								height: 80px;
								position: relative;
								justify-content: center;
								align-items: center;
								flex-direction: column;">
						<view class="d-title">
							选择模式
						</view>
						<view class="d-title-en">
							Select mode
						</view>
						<view class="closeDialog" @click="fnColse()">
							<image class="img" src="../../static/image/fjj/close.png"></image>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;align-items: center; justify-content: space-around;">
						<view class="dialog-flex-box">
							<view style="display:flex;flex-direction: column;" @click="fnChangeGameMode('offline')">
								<view>
									<image class="mode-img" src="../../static/image/fjj/s-mode.png"></image>
								</view>
								<view class="flex-title">
									| 训练模式 |
								</view>
								<view class="flex-title-en">
									Practice Mode
								</view>
							</view>
						</view>
						<view class="dialog-flex-box">
							<view style="display:flex;flex-direction: column;" @click="fnChangeGameMode('online')">
								<view>
									<image class="mode-img" src="../../static/image/fjj/o-mode.png"></image>
								</view>
								<view class="flex-title">
									| 联机模式 |
								</view>
								<view class="flex-title-en">
									Online Mode
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uv-popup>

		<view class="main" :style="{ height: scrollHeight + 'px'}">
			<view class="level_item level_1">

			</view>

			<view class="level_item level_2 message-scroll">
				<!-- 选择年级 -->
				<view style="position: relative;display: flex;align-items: center;">
					<view class="select-group">
						<view class="select-group-view" @click="openGradePicker">
							{{chooseGrade}}
						</view>
						<view style="position: absolute;right: 9px;top: 10px;">
							<image style="width: 20px; height: 20px;" v-if="isSelect"
								src="../../static/image/ftalk/up-image.png" mode=""></image>
							<image style="width: 20px; height: 20px;" v-else
								src="../../static/image/ftalk/down-image.png" mode=""></image>
						</view>
					</view>
				</view>

			</view>
			<view class="level_2_en">Select Grade</view>
			<view class="level_item level_3" :class="deviceType"
				:style="{ height: level3Height + 'px', width: level3Width + 'px'}">
				<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current"
					:mode="mode" :dots-styles="dotsStyles" field="content">
					<swiper class="swiper-box swiper" @change="change" :current="swiperDotIndex"
						:style="{ height: level3Height + 'px'}">

						<!-- 第一屏 -->
						<swiper-item
							style="position: absolute;width: 100%;justify-content: center;text-align: center;display: flex;vertical-align: middle;align-items: center;"
							:style="{ height: level3Height + 'px'}">
							<view class="to-right-btn to-right-btn1">
								<image src="../../static/image/to-right.png" mode="widthFix"></image>
							</view>
							<view class="swiper-item uni-bg-red">
								<view class="games_box">
									<view class="game_row1"
										:style="{ height: ((level3Height-30)/2-level3Height/16) + 'px'}">
										<uni-transition v-if="daren_object['场景配音'] && daren_object['场景配音'].status==1"
											:duration="100" ref="pcjj" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="pcjjshow">
											<view class="game game1" style="margin-bottom: -15px;"
												@click="fnClickGame('场景配音')"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}">
												<image style="width: 100%;height: 100%;"
													src="/static/image/fdr/cjpy.png" mode="aspectFit">
												</image>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game1" :style="{ width: gameWidth + 'px'}"
												style="overflow: hidden;">
												<view class="game-icon"></view>
												<view class="game-title"></view>
												<view class="game-title-en"></view>
											</view>
										</view>
									</view>

									<!-- 1 -->
									<view class="game_row2" :style="{ height: (level3Height-30)/2 + 'px'}">
										<uni-transition v-if="daren_object['话题思考'] && daren_object['话题思考'].status==1"
											:duration="100" ref="xspc" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="jspcshow">
											<view class="game game2" style="overflow: hidden;"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}"
												@click="fnClickGame('话题思考')">
												<image style="width: 100%;height: 100%;"
													src="/static/image/fdr/htsk.png" mode="aspectFit"></image>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game2" :style="{ width: gameWidth + 'px'}"
												style="overflow: hidden;">
												<view class="game-icon"></view>
												<view class="game-title"></view>
												<view class="game-title-en"></view>
											</view>
										</view>


										<view style="height:100%;overflow: hidden;" :style="{width: gapWidth + 'px'}">
										</view>

										<uni-transition v-if="daren_object['识词发音'] && daren_object['识词发音'].status==1"
											:duration="100" ref="hysc" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="zmjlshow">
											<view class="game game3" style="overflow: hidden;"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}"
												@click="fnClickGame('识词发音')">
												<image style="width: 100%;height: 100%;"
													src="/static/image/fdr/scfy.png" mode="aspectFit"></image>
												<view class="tag" :class="'tag-' + daren_object['识词发音'].test_type">
													{{daren_object['识词发音'].test_type === 'in' ? '内测' : '公测'}}
												</view>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game3" @click="fnClickGame('?')"
												:style="{ width: gameWidth + 'px'}" style="overflow: hidden;">
												<view class="game-icon">
													<image style="width: 75%;" mode="aspectFit"
														src="../../static/image/wenhao.png">
													</image>
												</view>
											</view>
										</view>

									</view>

									<!-- 2 -->
								</view>
							</view>
						</swiper-item>

						<!-- 第二屏 -->
						<swiper-item
							style="position: absolute;width: 100%;justify-content: center;text-align: center;display: flex;vertical-align: middle;align-items: center;"
							:style="{ height: level3Height + 'px'}">
							<view class="to-right-btn to-right-btn1">
								<image src="../../static/image/to-right.png" mode="widthFix"></image>
							</view>
							<view class="swiper-item uni-bg-red">
								<view class="games_box">
									<view class="game_row1"
										:style="{ height: ((level3Height-30)/2-level3Height/16) + 'px'}">
										<uni-transition v-if="daren_object['识图叙事'] && daren_object['识图叙事'].status==1"
											:duration="100" ref="cytz" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="pcjjshow">
											<view class="game game1" style="margin-bottom: -15px;"
												@click="fnClickGame('识图叙事')"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}">
												<image style="width: 100%;height: 100%;"
													src="/static/image/fdr/stxs.png" mode="aspectFit">
												</image>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game1" :style="{ width: gameWidth + 'px'}"
												style="overflow: hidden;">
												<view class="game-icon"></view>
												<view class="game-title"></view>
												<view class="game-title-en"></view>
											</view>
										</view>
									</view>
									<view class="game_row2" :style="{ height: (level3Height-30)/2 + 'px'}">
										<uni-transition v-if="daren_object['文章阅读'] && daren_object['文章阅读'].status==1"
											:duration="100" ref="jspc" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="jspcshow">
											<view class="game game2" style="overflow: hidden;"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}"
												@click="fnClickGame('文章阅读')">
												<image style="width: 100%;height: 100%;"
													src="/static/image/fdr/wzyd.png" mode="aspectFit"></image>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game2" :style="{ width: gameWidth + 'px'}"
												style="overflow: hidden;">
												<view class="game-icon"></view>
												<view class="game-title"></view>
												<view class="game-title-en"></view>
											</view>
										</view>


										<view style="height:100%;overflow: hidden;" :style="{width: gapWidth + 'px'}">
										</view>

										<uni-transition v-if="daren_object['英语写作'] && daren_object['英语写作'].status==1"
											:duration="100" ref="zmjl" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="zmjlshow">
											<view class="game game3" style="overflow: hidden;"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}"
												@click="fnClickGame('英语写作')">
												<image style="width: 100%;height: 100%;"
													src="/static/image/fdr/yyxz.png" mode="aspectFit"></image>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game3" @click="fnClickGame('?')"
												:style="{ width: gameWidth + 'px'}" style="overflow: hidden;">
												<view class="game-icon">
													<image style="width: 75%;" mode="aspectFit"
														src="../../static/image/wenhao.png">
													</image>
												</view>
											</view>
										</view>

									</view>

								</view>
							</view>
						</swiper-item>

					</swiper>
				</uni-swiper-dot>
			</view>

			<view class="bottomContent" :style="{width: level3Width + 'px'}">
				<view class="mode-title" style="height: 80px;margin-bottom: 50px;">
					<view class="btn-style">
						报告一览
					</view>
				</view>
			</view>
		</view>
		<uv-picker ref="picker" :columns="columns" @close="fnClose" @confirm="confirm"></uv-picker>

		<popPromptBox v-if="showTips" :showClose="true" :msg="msg" align="left" @close="fnColseJoinRankDialog()"
			@confirm="confirmFn"></popPromptBox>

		<!-- 键盘说明 -->
		<!-- 		<popImageBox v-if="imageShow" msg="键盘操作说明" btnTxt="知道了" :showClose="true" @confirm="imageShow=false"
			@close="imageShow = false"></popImageBox> -->
	</view>
</template>

<script>
	import navbar from '../../components/gamesNav.vue'
	import mifeng from '../../components/games/mifeng.vue'

	export default {
		config: {
			disableScroll: true
		},

		components: {
			navbar,
			mifeng,
		},
		computed: {
			games_length() {
				var that = this;
				return Object.keys(that.daren_object).length;
			}
		},
		watch: {
			background_music_url(newVal, oldVal) {
				var that = this;

			},
			// pageType(newVal, oldVal) {
			// 	var that = this;
			// 	// uni.showToast({
			// 	// 	title: '有改变，要播放背景音乐了'
			// 	// })
			// 	if (that.audioContext) {
			// 		if (that.pageType == 'game_menu') {
			// 			that.audioContext.volume = 0.1;
			// 		}
			// 		if (that.pageType == 'game_page') {
			// 			that.audioContext.volume = 0.05;
			// 		}
			// 		if (that.pageType == 'game_rank') {
			// 			that.audioContext.volume = 0.1;
			// 		}
			// 		if (that.pageType == 'game_finish') {
			// 			that.audioContext.volume = 0.1;
			// 		}

			// 		that.audioContext.stop();
			// 		that.audioContext.src = that.$util.getBackgroundMusic(that.pageType);
			// 		that.audioContext.play();
			// 	}
			// }
		},
		data() {
			return {
				columns: [],
				chooseGrade: '',
				gradeArray: [],
				isSelect: false,

				imageShow: false,
				canPlayGame: false,
				showAll: true, // 显示全部游戏true 显示上线游戏1
				is_vip: 1,
				join_rank: 1, //1加入排行，0不加入排行
				notice_list: [{
					title: ''
				}],

				// pageType: '',

				background_music_url: '',
				letter_info: {},

				show: false,
				aaa: true,


				pcjjshow: true, //拼词竞技
				jspcshow: true, //极速拼词
				zmjlshow: true, //字母接龙
				cytzshow: true, //词源挑战
				xspcshow: true, //线索拼词
				hyscshow: true, //慧眼识词
				jggpcshow: true, //九宫格拼词
				nwwdshow: true, //你问我答


				modeClass: 'fade',
				styles: {},

				game_list: [],
				daren_object: {},
				current_game_info: {
					show: false
				},

				checked: [],
				canvaswidth: 0, //画布宽
				canvasheight: 0, //画布高

				// show: false,
				// title: '标题',
				// content: 'uView的目标是成为uni-app生态最优秀的UI框架',

				word: 'apple',
				scrollHeight: 0,
				level3Height: 0,
				level3Width: 0,
				level3MarginTop: 0,
				deviceType: 'phone',
				gapWidth: 0,
				gameWidth: 0,

				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0,
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
				showTips: false,
				msg: `确认参加SPBCN城市赛前置晋级排行榜?
					参加本排行榜后将会根据您在排行榜的排名获得奖励，最高可以获得参加SPBCN比赛的入围资格。

					注:确认参加将开放晋级排行榜，本赛季内不可退出。`,
			};
		},
		onReady() {
			const that = this
			uni.createSelectorQuery().select('.top-hr').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom;
				that.canvaswidth = uni.getSystemInfoSync().screenWidth - 24;
				that.level3Width = uni.getSystemInfoSync().screenWidth - 24;
				uni.createSelectorQuery().select('.level_2_en').boundingClientRect(rect2 => {
					uni.createSelectorQuery().select('.bottomContent').boundingClientRect(rect5 => {
						that.canvasheight = rect5.height;
						that.level3Height = uni.getSystemInfoSync().windowHeight -
							rect2.bottom - rect5.height;
						// 取最游戏外框最小值
						if (that.level3Width < that.level3Height) {
							that.level3Height = that.level3Width;
						}
						// 获取每个游戏的宽度
						if (that.deviceType == "phone") {
							that.gameWidth = (that.level3Height - 30) / 2;
							that.gapWidth = 0;
						} else {
							that.gameWidth = that.level3Height / 3;
							that.gapWidth = that.gameWidth / 3;
						}
						that.$nextTick(function() {
							that.$forceUpdate();
						})
					}).exec();
				}).exec();
			}).exec();
		},
		onLoad(options) {
			// #ifdef APP-NVUE
			this.styles = {
				justifyContent: 'center',
				alignItems: 'center',
				width: '100px',
				height: '100px',
				borderRadius: '5px',
				textAlign: 'center',
				backgroundColor: '#4cd964',
				boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)',
			}
			// #endif

			var that = this;

			that.fnInit();
			// console.log('daren_object', that.daren_object)
			that.getTestTypeList();
			uni.getSystemInfo({
				success: function(res) {
					// console.log('平台便利店 ：', res.uniPlatform)
					if (res.uniPlatform != 'web') {
						if (res.platform === 'android') {
							that.imageShow = false;
						} else if (res.platform === 'ios') {
							that.imageShow = true;
						}
					}
				}
			});

			// if (uni.getStorageSync('daren_object')) {
			that.daren_object = uni.getStorageSync('daren_object');
			// } else {
			// that.getDarenList();
			// }
		},

		onShow() {
			const that = this
			// that.$eventBus.$emit('callMethodIn_background_type', {
			// 	pageType: 'game_menu'
			// })

			console.log('xxx')

			// that.$eventBus.$emit('callMethodIn_background_type', {
			// 	type: 'menu'
			// })
		},
		mounted() {
			const that = this

			const systemInfo = uni.getSystemInfoSync();
			const isTablet = /iPad|Nexus|Tablet/i.test(systemInfo.model);
			if (isTablet) {
				// uni.showToast({
				// 	title: '这是平板设备'
				// })
				that.deviceType = "pad";
				uni.setStorageSync('deviceType', "pad");
				// console.log('这是平板设备');
			} else {
				// uni.showToast({
				// 	title: '这是手机设备'
				// })
				that.deviceType = "phone";
				// console.log('这是手机设备');
				uni.setStorageSync('deviceType', "phone");
			}
			// that.$eventBus.$emit('callMethodIn_background_type', {
			// 	type: 'menu'
			// })
		},
		methods: {
			fnClose() {
				var that = this;
				that.isSelect = false;
			},
			confirm(e) {
				var that = this;
				console.log('e=========', e);
				that.isSelect = false;
				this.chooseGrade = e.value[0]
				// this.userInfo.grade = this.$util.gradeData().find(item => item.dictLabel === this.chooseGrade)
				// 	.dictValue
			},
			// 获取类型列表
			getTestTypeList() {
				var that = this;
				that.$http.getTestTypeList({}).then(res => {
					if (res.code === 200) {
						that.type_list = res.data;

						const list = this.$util.gradeData().map(item => item.dictLabel)
						that.chooseGrade = list[0]
					} else {
						uni.showToast({
							title: res.msg,
							icon: '',
							duration: 2000
						})
					}
				})
			},

			openGradePicker() {
				console.log(1)
				this.columns = [];
				this.isSelect = true;
				const list = this.$util.gradeData().map(item => item.dictLabel)
				this.columns.push(list)
				this.$refs.picker.open()
				console.log('this.columns')
				console.log(this.columns[0][0])
			},

			// 获取达人列表
			getDarenList() {
				var that = this;
				that.$http.getTestTypeList({}).then(res => {
					if (res.code === 200) {
						that.daren_list = res.data
						var daren_object = {};
						for (var i = 0; i < that.daren_object.length; i++) {
							var title = that.daren_object[i].title;
							daren_object[title] = that.daren_object[i];
						}
						that.daren_object = daren_object;
						console.log('that.daren_object', that.daren_object);

						uni.setStorage({
							key: 'daren_object',
							data: daren_object
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: '',
							duration: 2000
						})
					}
				})
			},
			fnLuyin() {
				// uni.showToast({
				// 	title: '开始录音'
				// })
				// uni.record({
				// 	success: (res) => {
				// 		console.log('录音文件路径: ' + res.tempFilePath);
				// 		console.log('录音时长: ' + res.duration + 'ms');

				// 		// 在这里可以对录音文件进行处理，比如播放、上传等操作
				// 	},
				// 	fail: (err) => {
				// 		console.log('录音失败', err);
				// 	}
				// });
			},
			fnInit() {
				var that = this;
				that.getUserInfo();

			},
			// 排行榜点击事件
			rankClicked() {
				uni.navigateTo({
					url: "/pages/games/rankList"
				})
			},

			// 获取字母信息
			getLetterInfo() {
				var that = this;
				that.$http.getLetterInfo().then(res => {
					if (res.code == 200) {
						that.letter_info = res.data;
						uni.setStorageSync('letter_info', that.letter_info);
					}
				})
			},

			// 获取用户信息
			getUserInfo() {
				var that = this;
				uni.showLoading({
					title: '数据加载中，请稍后',
					mask: true,
				});
				that.$http.getUserInfo().then(res => {
					console.log('!!!!!')
					if (res.code === 200) {
						uni.hideLoading();
						that.join_rank = res.data.join_rank;
						that.is_vip = res.data.is_vip;
						that.canPlayGame = true;

						const title = res.data.vip_expire_time ? '欢迎您尊敬的蜂竞技会员，您的有效期至：' + res.data.vip_expire_time :
							'目前您还不是蜂竞技会员'
						const enTitle = res.data.vip_expire_time ?
							'Welcome esteemed Bee Competition member, your validity period until:' + res.data
							.vip_expire_time :
							'You are not a Bee Competition member'
						that.notice_list = [{
							title,
							enTitle
						}]


						if (that.join_rank == 1) {
							that.checked = ['checked'];
						} else {
							that.checked = [];
						}

						that.getLetterInfo();
					}
				})
			},

			ajax_update_join_rank() {
				var that = this;
				if (that.checked.length == 1) {
					var join_rank = 1;
				} else {
					var join_rank = 0;
				}
				that.$http.updateJoinRank({
					join_rank: join_rank
				}).then(res => {
					if (res.code === 200) {
						// uni.showToast({
						// 	title: '保存成功',
						// 	icon: 'none'
						// })
					}
				})
			},

			fnColse() {
				this.$refs.popup.close();
			},
			// 训练模式选择难度回调
			selectDif(val) {
				console.log('val', val);
			},
			//选择游戏
			fnClickGame(item, index) {
				var that = this;
				var type_info = that.daren_object[item];

				console.log(type_info);
				that.fnSelectType(type_info);
			},

			fnSelectType(item) {
				var that = this;

				that.type_id = item.id;


				// 获取年级
				var grade_list = this.$util.gradeData();
				for (var i = 0; i < grade_list.length; i++) {
					if (grade_list[i].dictLabel == that.chooseGrade) {
						that.dictCode = grade_list[i].dictCode;
					}
				}
				that.grade_id = '80' + that.dictCode.toString().padStart(2, '0');


				console.log('/pages/bmaster/oralAssessment_detail?grade_id=' + that.grade_id + '&type_id=' + that
					.type_id + '&type=' + item.title + '&grade=' +
					that.chooseGrade)
				uni.navigateTo({
					url: `/pages/bmaster/oralAssessment_detail?grade_id=${that.grade_id}&type_id=${that
						.type_id}&type=${item.title}&grade=${that.chooseGrade}&alias=${item.alias}&en=${item.content}&flag=${item.alias}`
				})
			},

			// 拼词竞技
			fnPlayAnimationPCJJ: function() {
				var that = this;
				that.$refs.pcjj.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.pcjj.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.pcjj.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationJSPC: function() {
				var that = this;
				that.$refs.jspc.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.jspc.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.jspc.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationZMJL: function() {
				var that = this;
				that.$refs.zmjl.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.zmjl.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.zmjl.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationCYTZ: function() {
				var that = this;
				that.$refs.cytz.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.cytz.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.cytz.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationXSPC: function() {
				var that = this;
				that.$refs.xspc.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.xspc.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.xspc.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationHYSC: function() {
				var that = this;
				that.$refs.hysc.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.hysc.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.hysc.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationJGGPC: function() {
				var that = this;
				that.$refs.hysc.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.hysc.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.hysc.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationNWWD: function() {
				var that = this;
				that.$refs.hysc.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.hysc.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.hysc.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			change(e) {
				this.current = e.detail.current
			},
			selectStyle(index) {
				this.dotsStyles = this.dotStyle[index]
				this.styleIndex = index
			},
			selectMode(mode, index) {
				this.mode = mode
				this.modeIndex = index
				this.styleIndex = -1
				this.dotsStyles = this.dotStyle[0]
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			onBanner(index) {
				console.log(22222, index);
			},

			fnChangeGameMode(type) {
				var that = this;

				if ('判断网络状态') {
					if (!that.$util.getNetWorkStatus()) {
						return false;
					}
				}

				var game_info = that.current_game_info;

				that.$refs.popup.close();

				if (type == 'online') {
					var game_mode = game_info.name + "|" + '联机模式';
					uni.navigateTo({
						url: '/pages/games/' + game_info.alias + '/game_' + game_info.alias +
							'_find_room?game_mode=' + game_mode +
							'&game_info=' +
							encodeURIComponent(JSON.stringify(game_info)),
						animationType: 'slide-in-bottom', // 右侧滑入效果
						animationDuration: 300 // 动画时长300毫秒
					})
				} else {
					var game_mode = game_info.name + "|" + '训练模式';
					uni.navigateTo({
						url: '/pages/games/' + game_info.alias + '/game_' + game_info.alias +
							'_exercise_room?game_mode=' +
							game_mode +
							'&game_info=' +
							encodeURIComponent(JSON.stringify(game_info)),
						animationType: 'slide-in-bottom', // 右侧滑入效果
						animationDuration: 300 // 动画时长300毫秒
					})
				}
			},
			// 关闭弹框
			close() {
				var that = this;
				that.show = false;
			},

			handleToGame() {
				uni.navigateTo({
					url: '/pages/game_round_1/game'
				})
			},

			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},

			checkFn() {
				var that = this
				// 根据用户状态判断是否可点击
				if (this.join_rank != 1) {
					that.checked = []
					that.showTips = true;
				} else {
					that.checked = ['checked']
				}
			},
			confirmFn() {
				var that = this
				that.checked = ['checked']
				that.ajax_update_join_rank();
				that.showTips = false
				// 调用接口保存
			},
			fnColseJoinRankDialog() {
				var that = this
				that.showTips = false;
				that.ajax_update_join_rank();
			}
		}
	}
</script>

<style lang="less">
	.page {
		background: radial-gradient(circle, #373632, #000);
		width: 100%;
		height: 100vh;
		text-align: center;

	}

	.top-hr {
		width: 100%;
		height: 1px;
	}

	.main {
		width: 100%;
		height: 100vh;
		display: flex;
		position: relative;
		flex-direction: column;
		background-image: url(../../static/image/homePage/diwen.png);
		background-size: 100% auto;
		background-position: top left;
		background-repeat: repeat-y;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;

		.level_item {
			// overflow: hidden;
		}
	}

	.level_1 {
		height: 70px;
		display: flex;
		align-items: center;
		padding-top: 20px;
		border: 1px solid transparent;
	}

	.level_2 {
		height: 82px;
		color: #fff;
		font-family: hzgb;
		font-size: 16px;
		margin-top: 20px;
		border: 1px solid transparent;
	}

	.level_2_en {
		color: #fff;
		font-size: 12px;
		border-bottom: 2px solid #d7ad56;
		width: 100px;
		margin: 0 auto 0px;
		padding-bottom: 2px;
		border: 1px solid transparent;
	}

	.level_3 {
		// flex: 1;
		display: flex;
		align-items: center;
		width: 100%;
		border: 1px solid transparent;
		margin: 0 auto;

		.swiper {
			// border: 1px solid green;
			// height: 600rpx;
		}

		.swiper-item {
			display: block;
			// height: 600rpx;
			text-align: center;
		}
	}

	.games_box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 10px 0px;
		border: 1px solid transparent;

		.game_row1 {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.game_row2 {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.game {
			width: 100%;
			height: 100%;
			color: white;
			// border: 1px solid blue;
			// background-image: url(../../static/image/fengyongyanxuan/6bianBorder.png);
			background-position: center center;
			background-size: contain;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.game-icon {
				// margin-top: 40px;
				margin-bottom: 4px;
				width: 88%;

				img {
					width: 75%;
				}
			}
		}
	}

	.message-scroll {
		width: 100%;
		// background-color: red;
		font-family: Arial, sans-serif;
		padding: 20px 0px;
		box-sizing: border-box;
		position: relative;

		.mode-title {
			display: flex;
			height: 70px;
			position: relative;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.d-title {
				font-family: hzgb;
				font-size: 16px;
				color: #fff;
				margin-bottom: 8px;
			}

			.d-title-en {
				font-family: hzgb;
				font-size: 10px;
				color: #fff;
			}
		}

		.select-group {
			width: 150px;
			height: 40px;
			position: relative;
			padding: 3px;
			box-sizing: border-box;
			border-radius: 20px;
			left: 50%;
			margin-left: -75px;
			background: linear-gradient(to bottom, #ffd16b, #fff497);

			.select-group-view {
				width: 100%;
				height: 100%;
				border-radius: 20px;
				background: black;
				color: white;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.bottomContent {
		width: 100%;
		position: absolute;
		bottom: 0;
		display: flex;
		flex-direction: column;
	}

	.level_4 {
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid transparent;
	}

	.title-en-common {
		width: 100%;
		height: 30px;
	}

	.level_5 {
		height: 200px;
		border: 1px solid transparent;
	}

	// --------------

	.selectModeBox {
		background: linear-gradient(to bottom, #373632 0%, #130e00 100%);
		border-radius: 20px;

		.selectModeBoxBg {
			background: url(../../static/image/homePage/diwen.png);
			background-size: cover;
			background-repeat: no-repeat;
			width: 100%;
			height: 100%;
		}
	}

	.closeDialog {
		right: 0px;
		top: 0px;
		position: absolute;
		width: 50px;
		height: 50px;

		.img {
			width: 24px;
			height: 24px;
			margin-top: 20px;
			margin-right: 8px;
		}
	}

	.d-title {
		font-family: hzgb;
		font-size: 16px;
		color: #fff;
		margin-bottom: 8px;
	}

	.d-title-en {
		font-family: hzgb;
		font-size: 10px;
		color: #fff;
	}

	.mode-img {
		width: 100px;
		height: 48px;
		margin-bottom: 4px;
	}

	.flex-title {
		font-family: hzgb;
		font-size: 14px;
		color: #fff;
		margin-bottom: 8px;
	}

	.flex-title-en {
		font-family: hzgb;
		font-size: 10px;
		color: #fff;
	}

	.dialog-flex-box {
		width: 120px;
		height: 120px;
		border: 3px solid #d7ad56;
		border-radius: 16px;
		margin-bottom: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.top-notice {
		width: 100%;
		height: 50px;
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		font-size: 12px;
		font-family: hzgb;
		border-radius: 50px;
		color: #000;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.avatar {
		width: 40px;
		height: 40px;
		margin-left: 4px;
	}

	.game-title {
		color: #fff;
		font-size: 14px;
		font-family: hzgb;
	}

	.game-title-en {
		color: #fff;
		font-size: 10px;
	}

	.operate {
		position: relative;
		width: 100vw;
		top: 10px;

		.rank-icon {
			width: 30px;
			height: 30px;
			position: absolute;
			right: 25px;
			border-radius: 4px;
			background: linear-gradient(to top, #fff497, #ffd16b);
			box-shadow: 0 4px 0 0 #d9b059;
			margin-bottom: 12px;

			.img {
				width: 30px;
				height: 30px;
			}
		}

		.rank-icon-null {
			background: linear-gradient(to top, #cfcfcf, #a1a1a1);
			box-shadow: 0 4px 0 0 #969696;
		}
	}

	.btn-style {
		width: 200px;
		margin: 0 auto;
		font-size: 16px;
		padding: 12px 22px;
		background: linear-gradient(to top, #fff497, #ffd16b);
		border-radius: 25px;
		letter-spacing: 2px;
		color: black;
		font-family: hzgb;
	}

	.member-en {
		font-family: normal;
		font-size: 10px;
		white-space: break-spaces;
		text-align: left;
		margin-left: 20px;
		line-height: 12px;
	}

	.game {
		position: relative;
	}

	.tag {
		position: absolute;
		bottom: 18px;
		font-size: 10px;
		font-weight: bold;
		padding: 0 6px;
		border-radius: 14px;
	}

	.tag-in {
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		color: #000;
	}

	.tag-out {
		background: linear-gradient(to bottom, #ed0c6c, #b8349a);
		color: #fff;
	}

	.pad {
		.tag {
			bottom: 30px;
			font-size: 14px;
			padding: 0 12px;
		}
	}

	.to-right-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		z-index: 10000;

		image {
			width: 24px;
		}

		animation: toRight 500ms linear infinite alternate;
	}

	.to-right-btn1 image {
		width: 34px;
	}

	@keyframes toRight {
		from {
			right: 0;
		}

		to {
			right: 5px;
		}
	}
</style>